<script setup lang="ts">
// 此视频来自 coverr.co 视频网站
import coverrVideo from '~/assets/Photographer in mountains.mp4'

// 设置初始值 800 是因为，当前 nuxt3 版本静态托管存在问题
const wh = ref(800)
const onResize = () => {
  if (process.client) {
    const h = document.documentElement.clientHeight
    wh.value = h
  }
}

const videoRef = ref()
const onScroll = () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  const ch = document.body.clientHeight
  // 滚动高度 大于 可移动高度则改变菜单头部
  if (scrollTop >= (ch - 80)) {
    // 视频暂停
    if (videoRef.value)
      videoRef.value.pause()
  }
  else {
    // 视频播放
    if (videoRef.value)
      videoRef.value.play()
  }
}
onMounted(() => {
  window.addEventListener('resize', onResize, false)
  window.addEventListener('scroll', onScroll, false)
  onResize()
})

onUnmounted(() => {
  window.removeEventListener('resize', onResize)
  window.removeEventListener('scroll', onScroll)
})
</script>

<template>
  <div class="w-[100%] h-[100%]">
    <section class="fixed top-0 left-0 z-0 w-[100%] h-[100%]">
      <!-- 漏加 videoRef 了 -->
      <video ref="videoRef" loop autoplay muted :src="coverrVideo" class="w-[100%] h-[100%] object-cover" />
      <div class="absolute top-0 left-0 w-[100%] h-[100%] bg-[rgba(12,12,13,0.5)] flex items-center justify-center">
        <section class="text-white font-bold">
          <h1 class="text-40px">从开始入门</h1>
          <h3 class="text-20px mt-40px">有点东西，但东西不多</h3>
        </section>
      </div>
    </section>

    <section id="id0" :style="{ 'margin-top': `${wh}px` }" class="bg-white relative h-200px">
      id0
    </section>
    
    <section :id="`id${item}`" v-for="item in 10" :key="item" :class="item%2 == 0 ? '!bg-transparent' : ''" class="bg-red-500 relative h-200px mt-10px">
      item {{item}}
    </section>
  </div>
</template>